<!--
  功能：功能描述
  作者：王代彬
  时间：2021年02月26日 21:25:25
  版本：v1.0
-->
<template>
    <div class="container">
        <h3>内容超出时滚动</h3>
        <div class="security_info" id="right_text_top_box">
            <div id="right_text_top1">
                <div v-for="(item, index) in messages" :key="index" @click="checkedRow(item)">
                    {{ item.name }}
                </div>
            </div>
            <div id="right_text_top2" v-if="allowRoll">
                <div v-for="(item, index) in messages" :key="index" @click="checkedRow(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="table-box">
            <ScrollTable :columns="columns" :table-data="tableData" :thStyle="{ background:'#1f335c'}">
                <template #dayPlan="{ row }">
                    <div class="red-text">
                        <div><span class="red">{{ row.dayPlan.finished }}</span>/{{ row.dayPlan.total }}</div>
                        <div>完成率</div>
                        <div class="red">{{ completion(row.dayPlan.total, row.dayPlan.finished) }}</div>
                    </div>
                </template>
                <template #weekPlan="{ row }">
                    <div class="red-text">
                        <div><span class="red">{{ row.weekPlan.finished }}</span>/{{ row.weekPlan.total }}</div>
                        <div>完成率</div>
                        <div class="red">{{ completion(row.weekPlan.total, row.weekPlan.finished) }}</div>
                    </div>
                </template>
                <template #monthPlan="{ row }">
                    <div class="red-text">
                        <div><span class="red">{{ row.monthPlan.finished }}</span>/{{ row.monthPlan.total }}</div>
                        <div>完成率</div>
                        <div class="red">{{ completion(row.monthPlan.total, row.monthPlan.finished) }}</div>
                    </div>
                </template>
                <template #hiddenDanger="{ row }">
                    <div class="red-green">
                        <div>待处理<span class="red">{{ row.hiddenDanger.todo }}</span></div>
                        <div>已处理<span class="green">{{ row.hiddenDanger.processed }}</span></div>
                    </div>
                </template>
            </ScrollTable>
        </div>

    </div>
</template>

<script>
import ScrollTable from './ScrollTable/index.vue'
export default {
    name: 'demo',
    components: {
        ScrollTable
    },
    data () {
        return {
            messages: [
                {
                    name: '1胜多负少的鬼地方个梵蒂冈梵蒂冈',
                    id: '1'
                },
                {
                    name: '2孤鸿寡鹄接发广告',
                    id: '2'
                },
                {
                    name: '3好几款加了个放电饭锅单方事故电饭锅',
                    id: '3'
                },
                {
                    name: '4让他一人头有try让他一人头有如图',
                    id: '4'
                },
                {
                    name: '5不VNVB女包女不女保存V型',
                    id: '5'
                },
                {
                    name: '6发给红军号狂欢节',
                    id: '6'
                },
                {
                    name: '7金龟换酒体育部VN框架宽度改地方个梵蒂冈',
                    id: '7'
                },
                {
                    name: '8下再擦拭地方个梵蒂冈发',
                    id: '8'
                },
                {
                    name: '9建行卡号健康就好健康就好狂欢节狂欢节',
                    id: '9'
                },
                {
                    name: '10发给红军发个话费和规范化号狂欢节',
                    id: '10'
                }
            ],
            allowRoll: false,
            myScrollTopTimer: null,
            columns: [
                {
                    key: 'name',
                    title: '单位名称'
                },
                {
                    key: 'inspectTotal',
                    title: '巡检点总数'
                },
                {
                    key: 'dayPlan',
                    title: '今日计划',
                    width: 150
                },
                {
                    key: 'weekPlan',
                    title: '本周计划',
                    width: 150
                },
                {
                    key: 'monthPlan',
                    title: '本月巡检计划',
                    width: 150
                },
                {
                    key: 'hiddenDanger',
                    title: '隐患',
                    width: 140
                },
                {
                    key: 'inspectQuantity',
                    title: '累计巡检量'
                }
            ],
            tableData: []
        }
    },
    methods: {
        checkedRow (row) {
            console.log(row.id)
        },
        doitScollTop () {
            let test = document.getElementById('right_text_top_box')
            let test1 = document.getElementById('right_text_top1')
            this.allowRoll = test1.offsetHeight >= test.offsetHeight

            function move () {
                if (test.scrollTop >= test1.offsetHeight) {
                    test.scrollTop = 0
                } else {
                    test.scrollTop++
                }
            }
            let _this = this
            this.myScrollTopTimer = setInterval(move, 50)
            test.onmouseover = function () {
                clearInterval(_this.myScrollTopTimer)
            }
            test.onmouseout = function () {
                _this.myScrollTopTimer = setInterval(move, 50)
            }
        },
        completion (total, finished) {
            const n = (finished / total).toFixed(2)
            return `${n * 100}%`
        }
    },
    created () {
        this.tableData = new Array(10).fill(1).map((n, i) => {
            return {
                id: `${i + 1}`,
                name: `xx单位${i + 1}`,
                inspectTotal: 2000,
                dayPlan: {
                    total: 100,
                    finished: 20
                },
                weekPlan: {
                    total: 100,
                    finished: 20
                },
                monthPlan: {
                    total: 100,
                    finished: 20
                },
                hiddenDanger: {
                    processed: 10,
                    todo: 2
                },
                inspectQuantity: 100
            }
        })
    },
    mounted () {
        this.$nextTick(() => {
            this.doitScollTop()
        })
    },
    beforeDestroy () {
        this.myScrollTopTimer && clearInterval(this.myScrollTopTimer)
    }
}
</script>

<style lang='less' scoped>
.container {
    height: 100%;
    overflow-y: auto;
    background-color: #1f335c;
    color: #fff;
    padding: 20px;
}

.security_info {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #000;

    #right_text_top1,
    #right_text_top2 {
        & div:hover {
            background-color: turquoise;
            cursor: pointer;
        }
    }
}

.table-box {
    width: 80%;

    .red-text {
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;

        .red {
            color: red;
        }
    }

    .red-green {
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;

        .red {
            color: red;
        }

        .green {
            color: greenyellow;
        }
    }
}
</style>
